<template>
  <div>
    <i-row style="height: 50px;">
      <i-col span="20">
        <i-input style="width: 300px;" placeholder="输入学生姓名进行检索" v-model="searchKey" @on-enter="search"></i-input>
        <i-button type="primary" @click="search">检索</i-button>
      </i-col>
      <i-col span="4">
        <i-button type="primary" @click="showCreateDialog" long>添加学生</i-button>
      </i-col>
    </i-row>
    <i-row>
      <i-col span="24">
        <i-table border height="600" :columns="columns" :data="students"></i-table>
      </i-col>
    </i-row>

    <i-modal ref="modalDialog" v-model="showDialog" :title="dialogTitle" @on-ok="okDialog" :loading="true">
      <i-form ref="dialogForm" :model="student" :label-width="80" :rules="validate">
        <i-form-item label="学号" prop="code">
          <i-input v-model="student.code"></i-input>
        </i-form-item>
        <i-form-item label="姓名" prop="name">
          <i-input v-model="student.name"></i-input>
        </i-form-item>
        <i-form-item label="家长" prop="parent">
          <i-input v-model="student.parent"></i-input>
        </i-form-item>
        <i-form-item label="联系电话" prop="phone">
          <i-input v-model="student.phone"></i-input>
        </i-form-item>
        <i-form-item label="性别">
          <i-radio-group v-model="student.gender">
            <i-radio label="MALE">男</i-radio>
            <i-radio label="FEMALE">女</i-radio>
          </i-radio-group>
        </i-form-item>
        <i-form-item label="出生日期" prop="birthday">
          <i-date-picker type="date" v-model="student.birthday"></i-date-picker>
        </i-form-item>
        <i-form-item label="入学日期" prop="startDate">
          <i-date-picker type="date" v-model="student.startDate"></i-date-picker>
        </i-form-item>
        <i-form-item label="状态">
          <i-switch size="large" v-model="isAtSchool">
            <span slot="open">在学</span>
            <span slot="close">退学</span>
          </i-switch>
        </i-form-item>
        <i-form-item label="备注" prop="comment">
          <i-input v-model="student.comment" type="textarea" :autosize="{minRows: 2, maxRows: 5}"></i-input>
        </i-form-item>
      </i-form>
    </i-modal>
  </div>
</template>

<script>
export default {
  name: "student-management",
  data: function() {
    return {
      searchKey: "",
      columns: [
        {
          title: "学号",
          key: "code"
        },
        {
          title: "姓名",
          key: "name"
        },
        {
          title: "家长",
          key: "parent"
        },
        {
          title: "联系电话",
          key: "phone"
        },
        {
          title: "性别",
          key: "gender",
          width: 80,
          render: (h, params) => {
            return h("span", this.formatGender(params.row.gender));
          }
        },
        {
          title: "出生日期",
          key: "birthday",
          width: 100
        },
        {
          title: "入学日期",
          key: "startDate",
          width: 100
        },
        {
          title: "状态",
          key: "status",
          width: 80,
          render: (h, params) => {
            return h("span", this.formatStatus(params.row.status));
          }
        },
        {
          title: "操作",
          width: 140,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showUpdateDialog(params.row);
                    }
                  }
                },
                "编辑"
              ),
              " ",
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showDeleteConfirm(params.row);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      students: [],
      showDialog: false,
      student: {},
      dialogTitle: "",
      validate: {
        code: [
          { required: true, message: "请输入学号。", trigger: "blur" },
          { type: "string", max: 16, message: "学号长度应该在1-16之间。" }
        ],
        name: [
          { required: true, message: "请输入姓名。", trigger: "blur" },
          { type: "string", max: 16, message: "姓名长度应该在1-16之间。" }
        ],
        parent: [
          { required: true, message: "请输入家长。", trigger: "blur" },
          { type: "string", max: 16, message: "家长长度应该在1-16之间。" }
        ],
        phone: [
          { required: true, message: "请输入联系电话。", trigger: "blur" },
          { type: "string", max: 32, message: "联系电话长度应该在1-32之间。" }
        ],
        birthday: [
          {
            required: true,
            type: "date",
            message: "请输入出生日期。",
            trigger: "change"
          }
        ],
        startDate: [
          {
            required: true,
            type: "date",
            message: "请输入入学日期。",
            trigger: "change"
          }
        ],
        comment: [
          {
            type: "string",
            max: 512,
            message: "备注长度应该不大于512。",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.axios.get("/students").then(response => {
      this.students = response.data;
    });
  },
  computed: {
    isAtSchool: {
      get() {
        return this.student.status !== "LEAVE_SCHOOL";
      },
      set(value) {
        if (value) {
          this.student.status = "AT_SCHOOL";
        } else {
          this.student.status = "LEAVE_SCHOOL";
        }
      }
    }
  },
  methods: {
    search() {
      this.axios
        .get("/students", {
          params: {
            name: this.searchKey
          }
        })
        .then(response => {
          this.students = response.data;
        });
    },
    showCreateDialog() {
      this.dialogTitle = "添加学生";
      this.$refs["dialogForm"].resetFields();

      const birthday = new Date();
      birthday.setFullYear(birthday.getFullYear() - 5);

      this.student = {
        gender: "MALE",
        status: "AT_SCHOOL",
        birthday: birthday,
        startDate: new Date()
      };
      this.showDialog = true;
    },
    showUpdateDialog(student) {
      this.dialogTitle = "编辑学生";
      this.$refs["dialogForm"].resetFields();

      this.student = Object.assign({}, student);
      this.student.birthday = new Date(student.birthday);
      this.student.startDate = new Date(student.startDate);
      this.showDialog = true;
    },
    showDeleteConfirm(student) {
      this.$Modal.confirm({
        title: "确认删除学生",
        content: "确认要删除学生[" + student.name + "]吗？",
        loading: true,
        onOk: () => {
          this.delete(student.id);
        }
      });
    },
    okDialog() {
      this.$refs["dialogForm"].validate(valid => {
        if (valid) {
          if (!this.student.id) {
            this.create();
          } else {
            this.update();
          }
        } else {
          this.$refs["modalDialog"].buttonLoading = false;
        }
      });
    },
    create() {
      this.axios.post("/students", this.student).then(response => {
        if (response.code === 0) {
          this.$Message.success("添加学生成功。");
          this.showDialog = false;
          this.search();
        } else {
          this.$Message.error("添加学生失败。" + response.message);
          this.$refs["modalDialog"].buttonLoading = false;
        }
      });
    },
    update() {
      this.axios.put("/students", this.student).then(response => {
        if (response.code === 0) {
          this.$Message.success("编辑学生成功。");
          this.showDialog = false;
          this.search();
        } else {
          this.$Message.error("编辑学生失败。" + response.message);
          this.$refs["modalDialog"].buttonLoading = false;
        }
      });
    },
    delete(id) {
      this.axios.delete("/students/" + id).then(response => {
        this.$Modal.remove();
        if (response.code === 0) {
          this.$Message.success("删除学生成功。");
          this.search();
        } else {
          this.$Message.error("删除学生失败。" + response.message);
        }
      });
    },
    formatGender(gender) {
      if ("MALE" === gender) {
        return "男";
      } else if ("FEMALE" === gender) {
        return "女";
      } else {
        return "?";
      }
    },
    formatStatus(status) {
      if ("AT_SCHOOL" === status) {
        return "在学";
      } else if ("LEAVE_SCHOOL" === status) {
        return "退学";
      } else {
        return "?";
      }
    }
  }
};
</script>
